<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>树叶 - 叶序艺术</title>
    <link rel="stylesheet" href="style.css">
    <!-- 引入字体 Awesome 用于图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <!-- 导航栏 -->
    <header class="navbar">
        <div class="logo">
            <h1>叶序</h1>
        </div>
        <nav>
            <ul class="nav-links">
                <li><a href="index.html">首页</a></li>
                <li><a href="shuye.html" class="active">树叶</a></li>
                <li><a href="zhoubian.html">周边</a></li>
                <li><a href="huaxiang.html">画廊</a></li>
            </ul>
        </nav>
        <div class="hamburger">
            <div class="line"></div>
            <div class="line"></div>
            <div class="line"></div>
        </div>
    </header>
    <style>
        /* 树叶页面特有样式 */
        .leaf-header {
            position: relative;
            padding: 180px 0 120px;
            background-color: #f5f9f7;
            text-align: center;
            overflow: hidden;
        }
        
        .leaf-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path fill="%233a7d44" fill-opacity="0.05" d="M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z"></path></svg>');
            z-index: 0;
        }
        
        .leaf-header h1 {
            font-size: 3.5rem;
            color: var(--primary-color);
            margin-bottom: 20px;
            position: relative;
            z-index: 1;
        }
        
        .leaf-header p {
            font-size: 1.2rem;
            max-width: 800px;
            margin: 0 auto;
            position: relative;
            z-index: 1;
        }
        
        /* 树叶类型部分 */
        .leaf-types {
            padding: 120px 0;
            background-color: white;
        }
        
        .leaf-types h2 {
            font-size: 2.5rem;
            text-align: center;
            color: var(--primary-color);
            margin-bottom: 80px;
            position: relative;
            padding-bottom: 15px;
        }
        
        .leaf-types h2::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 3px;
            background-color: var(--accent-color);
        }
        
        .leaf-type-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 50px;
            margin-bottom: 80px;
        }
        
        .leaf-type-item {
            background-color: var(--light-color);
            border-radius: var(--border-radius);
            overflow: hidden;
            transition: var(--transition);
            box-shadow: var(--shadow);
        }
        
        .leaf-type-item:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }
        
        .leaf-type-img {
            height: 250px;
            background-size: cover;
            background-position: center;
            background-color: #e9ecef;
            transition: var(--transition);
            position: relative;
        }
        
        .leaf-type-img.spiral {
            background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
        }
        
        .leaf-type-img.opposite {
            background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
        }
        
        .leaf-type-img.alternate {
            background-image: linear-gradient(120deg, #a8edea 0%, #fed6e3 100%);
        }
        
        .leaf-type-img.whorled {
            background-image: linear-gradient(120deg, #fccb90 0%, #d57eeb 100%);
        }
        
        .leaf-type-content {
            padding: 30px;
        }
        
        .leaf-type-content h3 {
            font-size: 1.8rem;
            color: var(--dark-color);
            margin-bottom: 15px;
        }
        
        .leaf-type-content p {
            color: var(--text-color);
            margin-bottom: 20px;
            line-height: 1.7;
        }
        
        /* 叶序模式部分 */
        .phyllotaxis-patterns {
            padding: 120px 0;
            background-color: var(--light-color);
            position: relative;
            overflow: hidden;
        }
        
        .phyllotaxis-patterns h2 {
            font-size: 2.5rem;
            text-align: center;
            color: var(--primary-color);
            margin-bottom: 80px;
            position: relative;
            padding-bottom: 15px;
            z-index: 2;
        }
        
        .phyllotaxis-patterns h2::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 3px;
            background-color: var(--accent-color);
        }
        
        .pattern-content {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 100px;
            position: relative;
            z-index: 2;
        }
        
        .pattern-content:nth-child(even) {
            flex-direction: row-reverse;
        }
        
        .pattern-text {
            flex: 1;
            min-width: 300px;
            padding: 0 40px;
        }
        
        .pattern-text h3 {
            font-size: 2rem;
            color: var(--dark-color);
            margin-bottom: 25px;
        }
        
        .pattern-text p {
            font-size: 1.1rem;
            line-height: 1.8;
            margin-bottom: 20px;
            color: var(--text-color);
        }
        
        .pattern-visual {
            flex: 1;
            min-width: 300px;
            height: 400px;
            background-color: white;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }
        
        .pattern-visual.fibonacci::before {
            content: '';
            position: absolute;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background-image: radial-gradient(circle, var(--primary-color) 10%, transparent 11%),
                             radial-gradient(circle, var(--primary-color) 10%, transparent 11%);
            background-size: 50px 50px;
            background-position: 0 0, 25px 25px;
            animation: rotate 20s linear infinite;
        }
        
        .pattern-visual.spiral::before {
            content: '';
            position: absolute;
            width: 400px;
            height: 400px;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><path fill="none" stroke="%233a7d44" stroke-width="2" d="M200 200 L250 200 A50 50 0 0 1 250 300 L200 300 L200 200 L225 200 A25 25 0 0 1 225 250 L200 250 L200 200"/><path fill="none" stroke="%233a7d44" stroke-width="2" d="M200 200 L275 200 A75 75 0 0 1 275 350 L200 350 L200 200 L218 200 A18 18 0 0 1 218 236 L200 236 L200 200"/><path fill="none" stroke="%233a7d44" stroke-width="2" d="M200 200 L150 200 A50 50 0 0 0 150 300 L200 300 L200 200 L175 200 A25 25 0 0 0 175 250 L200 250 L200 200"/></svg>');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            animation: rotate 30s linear infinite;
        }
        
        /* 互动探索部分 */
        .interactive-exploration {
            padding: 120px 0;
            background-color: white;
            text-align: center;
        }
        
        .interactive-exploration h2 {
            font-size: 2.5rem;
            color: var(--primary-color);
            margin-bottom: 30px;
            position: relative;
            padding-bottom: 15px;
            display: inline-block;
        }
        
        .interactive-exploration h2::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 3px;
            background-color: var(--accent-color);
        }
        
        .interactive-exploration p {
            font-size: 1.1rem;
            max-width: 800px;
            margin: 0 auto 60px;
            color: var(--text-color);
            line-height: 1.8;
        }
        
        .interactive-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .interactive-item {
            padding: 40px 20px;
            background-color: var(--light-color);
            border-radius: var(--border-radius);
            transition: var(--transition);
            cursor: pointer;
            border: 2px solid transparent;
        }
        
        .interactive-item:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow);
            border-color: var(--primary-color);
        }
        
        .interactive-item i {
            font-size: 3rem;
            color: var(--primary-color);
            margin-bottom: 20px;
            transition: var(--transition);
        }
        
        .interactive-item:hover i {
            transform: scale(1.1) rotate(5deg);
        }
        
        .interactive-item h3 {
            font-size: 1.5rem;
            color: var(--dark-color);
            margin-bottom: 15px;
        }
        
        /* 树叶知识部分 */
        .leaf-facts {
            padding: 120px 0;
            background-color: var(--dark-color);
            color: white;
            text-align: center;
        }
        
        .leaf-facts h2 {
            font-size: 2.5rem;
            margin-bottom: 80px;
            position: relative;
            padding-bottom: 15px;
            display: inline-block;
        }
        
        .leaf-facts h2::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 3px;
            background-color: var(--accent-color);
        }
        
        .facts-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .fact-item {
            background-color: rgba(255, 255, 255, 0.05);
            padding: 30px;
            border-radius: var(--border-radius);
            transition: var(--transition);
        }
        
        .fact-item:hover {
            background-color: rgba(255, 255, 255, 0.1);
            transform: translateY(-10px);
        }
        
        .fact-item h3 {
            font-size: 1.5rem;
            margin-bottom: 15px;
            color: var(--secondary-color);
        }
        
        .fact-item p {
            color: rgba(255, 255, 255, 0.8);
            line-height: 1.7;
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .leaf-header {
                padding: 150px 0 100px;
            }
            
            .leaf-header h1 {
                font-size: 2.8rem;
            }
            
            .leaf-types h2,
            .phyllotaxis-patterns h2,
            .interactive-exploration h2,
            .leaf-facts h2 {
                font-size: 2rem;
            }
            
            .pattern-content,
            .pattern-content:nth-child(even) {
                flex-direction: column;
            }
            
            .pattern-text {
                padding: 0;
                margin-bottom: 40px;
            }
            
            .pattern-visual {
                height: 300px;
            }
        }
        
        @media (max-width: 576px) {
            .leaf-header h1 {
                font-size: 2.2rem;
            }
            
            .leaf-types h2,
            .phyllotaxis-patterns h2,
            .interactive-exploration h2,
            .leaf-facts h2 {
                font-size: 1.8rem;
            }
            
            .pattern-text h3 {
                font-size: 1.5rem;
            }
            
            .leaf-type-grid {
                gap: 30px;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <header class="navbar">
        <div class="logo">
            <h1>叶序</h1>
        </div>
        <nav>
            <ul class="nav-links">
                <li><a href="index.html">首页</a></li>
                <li><a href="shuye.html" class="active">树叶</a></li>
                <li><a href="zhoubian.html">周边</a></li>
                <li><a href="huaxiang.html">画廊</a></li>
            </ul>
        </nav>
        <div class="hamburger">
            <div class="line"></div>
            <div class="line"></div>
            <div class="line"></div>
        </div>
    </header>

    <!-- 页面头部 -->
    <section class="leaf-header">
        <div class="container">
            <h1>树叶的奥秘</h1>
            <p>探索自然中树叶的形态、结构与排列规律，感受植物生长的数学之美</p>
        </div>
    </section>

    <!-- 树叶类型部分 -->
    <section class="leaf-types">
        <div class="container">
            <h2>树叶排列类型</h2>
            
            <div class="leaf-type-grid">
                <div class="leaf-type-item">
                    <div class="leaf-type-img spiral"></div>
                    <div class="leaf-type-content">
                        <h3>螺旋排列</h3>
                        <p>最常见的叶序类型，叶片围绕茎干呈螺旋状排列，相邻两片叶子之间的角度通常为137.5°（黄金角）。这种排列方式使得每片叶子都能获得最大的光照面积，同时也展现了斐波那契数列的数学规律。</p>
                    </div>
                </div>
                
                <div class="leaf-type-item">
                    <div class="leaf-type-img opposite"></div>
                    <div class="leaf-type-content">
                        <h3>对生排列</h3>
                        <p>每一节上有两片叶子，相对生长。它们的排列方向通常与上下节的叶子垂直，形成十字交叉。这种排列方式常见于薄荷、丁香等植物，有助于保持植株的平衡和光照分布。</p>
                    </div>
                </div>
                
                <div class="leaf-type-item">
                    <div class="leaf-type-img alternate"></div>
                    <div class="leaf-type-content">
                        <h3>互生排列</h3>
                        <p>每一节上只长一片叶子，上下节的叶子交互生长在茎干的两侧。这种排列方式使叶子能够均匀分布，避免相互遮挡。许多树木如橡树、枫树等都采用这种生长方式。</p>
                    </div>
                </div>
                
                <div class="leaf-type-item">
                    <div class="leaf-type-img whorled"></div>
                    <div class="leaf-type-content">
                        <h3>轮生排列</h3>
                        <p>每一节上有三片或更多叶子，呈辐射状排列。这种排列方式较为少见，但在某些特定植物如夹竹桃、桔梗等中可以观察到。轮生排列使植物在有限空间内最大化光合作用面积。</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 叶序模式部分 -->
    <section class="phyllotaxis-patterns">
        <div class="container">
            <h2>叶序的数学模式</h2>
            
            <div class="pattern-content">
                <div class="pattern-text">
                    <h3>斐波那契螺旋</h3>
                    <p>斐波那契螺旋是自然界中最引人注目的数学模式之一，在向日葵花盘、松果鳞片和菠萝表皮上都能观察到。这种螺旋排列遵循斐波那契数列（1, 1, 2, 3, 5, 8, 13...），每个数字是前两个数字之和。</p>
                    <p>在叶序中，这种排列使得相邻叶片之间的夹角为137.5°（黄金角），这是圆周长与直径比例的自然延伸，也是最有效利用空间的排列方式。</p>
                </div>
                <div class="pattern-visual fibonacci"></div>
            </div>
            
            <div class="pattern-content">
                <div class="pattern-text">
                    <h3>螺旋叶序的形成机制</h3>
                    <p>螺旋叶序的形成是植物生长点细胞分裂和伸长的结果。在茎尖的生长点，新叶原基按照固定的角度依次形成，这个角度由植物激素和基因表达调控。</p>
                    <p>研究表明，这种精确的数学排列并非偶然，而是自然选择的结果，使植物能够在有限空间内最大化光合作用效率，同时优化水分分配和结构稳定性。</p>
                </div>
                <div class="pattern-visual spiral"></div>
            </div>
        </div>
    </section>

    <!-- 互动探索部分 -->
    <section class="interactive-exploration">
        <div class="container">
            <h2>互动探索</h2>
            <p>通过这些互动元素，深入了解树叶的结构特征和生长规律</p>
            
            <div class="interactive-container">
                <div class="interactive-item">
                    <i class="fas fa-seedling"></i>
                    <h3>叶序计算器</h3>
                    <p>输入植物种类，计算其可能的叶序角度和排列模式</p>
                </div>
                
                <div class="interactive-item">
                    <i class="fas fa-leaf"></i>
                    <h3>叶片结构</h3>
                    <p>探索不同类型叶片的内部结构和功能适应</p>
                </div>
                
                <div class="interactive-item">
                    <i class="fas fa-sync-alt"></i>
                    <h3>生长模拟器</h3>
                    <p>观察植物叶片按照数学规律螺旋生长的过程</p>
                </div>
                
                <div class="interactive-item">
                    <i class="fas fa-question-circle"></i>
                    <h3>识别挑战</h3>
                    <p>测试你对不同叶序类型的识别能力</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 树叶知识部分 -->
    <section class="leaf-facts">
        <div class="container">
            <h2>有趣的树叶知识</h2>
            
            <div class="facts-grid">
                <div class="fact-item">
                    <h3>最大的叶子</h3>
                    <p>亚马逊王莲的叶子直径可达3米，能够支撑一个儿童的重量。其叶脉结构形成了高效的承重系统。</p>
                </div>
                
                <div class="fact-item">
                    <h3>最长寿的叶子</h3>
                    <p>百岁兰的叶子可以存活数百年，有些甚至超过2000年，是地球上最长寿的叶子。</p>
                </div>
                
                <div class="fact-item">
                    <h3>会运动的叶子</h3>
                    <p>含羞草的叶子受到触碰时会迅速闭合，这是一种防御机制，通过改变细胞内的水分分布实现。</p>
                </div>
                
                <div class="fact-item">
                    <h3>叶子的颜色</h3>
                    <p>秋天树叶变色是因为叶绿素分解，暴露出了原本就存在的类胡萝卜素和花青素等色素。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-logo">
                    <h2>叶序</h2>
                    <p>艺术与自然的和谐</p>
                </div>
                <div class="footer-links">
                    <h3>导航</h3>
                    <ul>
                        <li><a href="index.html">首页</a></li>
                        <li><a href="shuye.html">树叶</a></li>
                        <li><a href="zhoubian.html">周边</a></li>
                        <li><a href="huaxiang.html">画廊</a></li>
                    </ul>
                </div>
                <div class="footer-social">
                    <h3>关注我们</h3>
                    <ul>
                        <li><a href="#"><i class="fab fa-weibo"></i></a></li>
                        <li><a href="#"><i class="fab fa-weixin"></i></a></li>
                        <li><a href="#"><i class="fab fa-instagram"></i></a></li>
                        <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                    </ul>
                </div>
                <div class="footer-contact">
                    <h3>联系我们</h3>
                    <p>邮箱：info@yexu.com</p>
                    <p>电话：123-4567-8910</p>
                </div>
            </div>
            <div class="footer-copyright">
                <p>&copy; 2025 叶序艺术. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        // 导航栏交互
        document.addEventListener('DOMContentLoaded', function() {
            const hamburger = document.querySelector('.hamburger');
            const navLinks = document.querySelector('.nav-links');
            const navbar = document.querySelector('.navbar');

            // 汉堡菜单切换
            hamburger.addEventListener('click', function() {
                navLinks.classList.toggle('active');
                hamburger.classList.toggle('active');
            });

            // 点击导航链接关闭菜单
            const links = document.querySelectorAll('.nav-links a');
            links.forEach(link => {
                link.addEventListener('click', () => {
                    navLinks.classList.remove('active');
                    hamburger.classList.remove('active');
                });
            });

            // 滚动时导航栏变化
            window.addEventListener('scroll', function() {
                if (window.scrollY > 50) {
                    navbar.classList.add('scrolled');
                } else {
                    navbar.classList.remove('scrolled');
                }
            });

            // 平滑滚动
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function(e) {
                    e.preventDefault();
                    const targetId = this.getAttribute('href');
                    if(targetId !== '#') {
                        const targetElement = document.querySelector(targetId);
                        if(targetElement) {
                            window.scrollTo({
                                top: targetElement.offsetTop,
                                behavior: 'smooth'
                            });
                        }
                    }
                });
            });

            // 互动项目点击效果
            const interactiveItems = document.querySelectorAll('.interactive-item');
            interactiveItems.forEach(item => {
                item.addEventListener('click', function() {
                    // 这里可以添加更多交互逻辑
                    this.style.backgroundColor = 'rgba(58, 125, 68, 0.1)';
                    setTimeout(() => {
                        this.style.backgroundColor = '';
                    }, 300);
                });
            });
            
            // 汉堡菜单切换
            const hamburger = document.querySelector('.hamburger');
            const navLinks = document.querySelector('.nav-links');
            const navbar = document.querySelector('.navbar');
            
            hamburger.addEventListener('click', function() {
                navLinks.classList.toggle('active');
                hamburger.classList.toggle('active');
            });
            
            // 点击导航链接关闭菜单
            const links = document.querySelectorAll('.nav-links a');
            links.forEach(link => {
                link.addEventListener('click', () => {
                    navLinks.classList.remove('active');
                    hamburger.classList.remove('active');
                });
            });
            
            // 滚动时导航栏变化
            window.addEventListener('scroll', function() {
                if (window.scrollY > 50) {
                    navbar.classList.add('scrolled');
                } else {
                    navbar.classList.remove('scrolled');
                }
            });
        });
    </script>
</body>
</html>